<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>main</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/mianStyle/main.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content">
			<!--数据列表-->
			<header class="mui-bar mui-bar-nav mui-bar-transparent">
				<div class="location inline">
					<i class="iconfont icon-weizhi"></i>
					<span id="location">正在定位您所在位置</span>
				</div>
				<div class="search inline">
					<i class="iconfont icon-search"></i> 新疆菜
				</div>
			</header>
			<div id="dataContent">
				<!-- 轮播图 -->
				<div class="mui-slider mui-slider-scroll">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/p4.jpg">
							</a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/p1.jpg">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/p2.jpg">
							</a>
						</div>
						<!-- 第三张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/p3.jpg">
							</a>
						</div>
						<!-- 第四张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/p4.jpg">
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/p1.jpg">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<!-- 九宫格 -->
				<div class="mui-slider mui-back-fff">
					<div class="mui-slider-group">
						<!--第一个内容区容器-->
						<div class="mui-slider-item">
							<!-- 具体内容 -->
							<ul class="mui-table-view mui-grid-view mui-grid-9">
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-home"></span>
										<div class="mui-media-body">美食</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-email"><span style="display: none;" class="mui-badge mui-badge-red">5</span></span>
										<div class="mui-media-body">美团超市</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-chatbubble"></span>
										<div class="mui-media-body">生鲜果蔬</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-location"></span>
										<div class="mui-media-body">甜点饮品</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-search"></span>
										<div class="mui-media-body">正餐优选</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-phone"></span>
										<div class="mui-media-body">美团专送</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-phone"></span>
										<div class="mui-media-body">家常菜</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-phone"></span>
										<div class="mui-media-body">小吃馆</div>
									</a>
								</li>
							</ul>
						</div>
						<!--第二个内容区-->
						<div class="mui-slider-item">
							<!-- 具体内容 -->
							<ul class="mui-table-view mui-grid-view mui-grid-9">
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-home"></span>
										<div class="mui-media-body">美食</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-email"><span style="display: none;" class="mui-badge mui-badge-red">5</span></span>
										<div class="mui-media-body">美团超市</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-chatbubble"></span>
										<div class="mui-media-body">生鲜果蔬</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-location"></span>
										<div class="mui-media-body">甜点饮品</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-search"></span>
										<div class="mui-media-body">正餐优选</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-phone"></span>
										<div class="mui-media-body">美团专送</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-phone"></span>
										<div class="mui-media-body">家常菜</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-phone"></span>
										<div class="mui-media-body">小吃馆</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="mui-slider-indicator mui-bottom-0">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<!-- 优惠专区 -->
				<div class="mui-discounts mui-back-fff  mui-mart5">
					<div class="mui-discounts-title">
						<fieldset>
							<legend>&nbsp;&nbsp;优惠专区&nbsp;&nbsp;</legend>
						</fieldset>
					</div>
					<div class="mui-discounts-content mui-overflow">
						<div class="mui-discounts-content-left mui-fl-40">
							<div class="mui-discounts-content-title">
								周一美食集
								<p>
									<span>好店5折起</span>
								</p>
							</div>
							<img src="images/p4.jpg" />
						</div>
						<ul class="mui-discounts-content-right mui-rl-60 mui-overflow">
							<li class="content-items mui-fl">
								<div class="mui-discounts-content-title">
									周一美食集
									<p>
										<span>好店5折起</span>
									</p>
								</div>
								<img src="images/p2.jpg" />
							</li>
							<li class="content-items mui-fl">
								<div class="mui-discounts-content-title">
									周一美食集
									<p>
										<span>好店5折起</span>
									</p>
								</div>
								<img src="images/p2.jpg" />
							</li>
							<li class="content-items mui-fl">
								<div class="mui-discounts-content-title">
									周一美食集
									<p>
										<span>好店5折起</span>
									</p>
								</div>
								<img src="images/p2.jpg" />
							</li>
							<li class="content-items mui-fl">
								<div class="mui-discounts-content-title">
									周一美食集
									<p>
										<span class="mui-back-org">好店5折起</span>
									</p>
								</div>
								<img src="images/p2.jpg" />
							</li>
						</ul>
					</div>
				</div>
				<!-- lists scroll -->
				<div class="scroll_box mui-mart5 mui-back-fff">
					<a class="mui-item">
						<img src="images/p2.jpg" />
						<div class="mui-discounts-content-title">
							周一美食集
							<p>
								<span>好店5折起</span>
							</p>
						</div>
					</a>
					<a class="mui-item">
						<img src="images/p2.jpg" />
						<div class="mui-discounts-content-title">
							周一美食集
							<p>
								<span>好店5折起</span>
							</p>
						</div>
					</a>
					<a class="mui-item">
						<img src="images/p2.jpg" />
						<div class="mui-discounts-content-title">
							周一美食集
							<p>
								<span>好店5折起</span>
							</p>
						</div>
					</a>
					<a class="mui-item">
						<img src="images/p2.jpg" />
						<div class="mui-discounts-content-title">
							周一美食集
							<p>
								<span>好店5折起</span>
							</p>
						</div>
					</a>
					<a class="mui-item">
						<img src="images/p2.jpg" />
						<div class="mui-discounts-content-title">
							周一美食集
							<p>
								<span>好店5折起</span>
							</p>
						</div>
					</a>
					<a class="mui-item">
						<img src="images/p2.jpg" />
						<div class="mui-discounts-content-title">
							周一美食集
							<p>
								<span>好店5折起</span>
							</p>
						</div>
					</a>
				</div>
				<!-- 为你优选 -->
				<div class="chooseBox mui-back-fff  mui-mart5">
					<div class="mui-discounts-title">
						<fieldset>
							<legend>&nbsp;&nbsp;为你优选&nbsp;&nbsp;</legend>
						</fieldset>
						<span class="more">更多&nbsp;&gt;</span>
					</div>
					<ul class="mui-table-view mui-grid-view">
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">(清真)伊泽源抓饭
									<p><span>口味相仿喜欢</span></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">(清真)伊泽源抓饭
									<p><span>口味相仿喜欢</span></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">(清真)伊泽源抓饭
									<p><span>口味相仿喜欢</span></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">(清真)伊泽源抓饭
									<p><span>口味相仿喜欢</span></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">(清真)伊泽源抓饭
									<p><span>口味相仿喜欢</span></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">(清真)伊泽源抓饭
									<p><span>口味相仿喜欢</span></p>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<!-- 品质专区 -->
				<div class="quality_box mui-back-fff  mui-mart5">
					<div class="mui-discounts-title">
						<fieldset>
							<legend>&nbsp;&nbsp;品质专区&nbsp;&nbsp;</legend>
						</fieldset>
					</div>
					<ul class="mui-table-view mui-grid-view">
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">品牌商家</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">品牌商家</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4  mui-col-sm-4">
							<a href="#">
								<img class="mui-media-object" src="images/p4.jpg">
								<div class="mui-media-body">品牌商家</div>
							</a>
						</li>
					</ul>
				</div>
				<!-- 广告位 -->
				<!-- 附近商家 -->
				<div class="merchant_box mui-back-fff  mui-mart5">
					<div class="mui-discounts-title">
						<fieldset>
							<legend>&nbsp;&nbsp;附近商家&nbsp;&nbsp;</legend>
						</fieldset>
					</div>
					<div class="merchant-nav">
						<span class="w26 active">综合排序</span>
						<span class="w26">销量最高</span>
						<span class="w26">距离最近</span>
						<span class="w22">筛选</span>
					</div>
					<div class="merchant-content">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/p2.jpg">
									<div class="mui-media-body">
										啊实打实大声道（阿萨德）
										<div class="content_data mui-overflow">
											<p class="star mui-fl">*****<span>月销3025</span></p>
											<p class="distance mui-fr">30分钟丨2.3km</p>
										</div>
										<div class="content_lists mui-overflow">
											<p class="contnet_items mui-fl"><span>起送￥20丨配送￥3丨人均￥15</span></p>
											<p class="meituan mui-fr">美团专送</p>
										</div>
										<div class="discount_lists">
											<i class="dot">v</i>
											<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
											<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
											<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
											<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
											<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
										</div>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/p2.jpg">
									<div class="mui-media-body">
										啊实打实大声道（阿萨德）
										<div class="content_data mui-overflow">
											<p class="star mui-fl">*****<span>月销3025</span></p>
											<p class="distance mui-fr">30分钟丨2.3km</p>
										</div>
										<div class="content_lists mui-overflow">
											<p class="contnet_items mui-fl"><span>起送￥20丨配送￥3丨人均￥15</span></p>
											<p class="meituan mui-fr">美团专送</p>
										</div>
										<div class="discount_lists">
											<i class="dot">v</i>
											<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
											<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
											<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
											<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
											<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
										</div>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="images/p2.jpg">
									<div class="mui-media-body">
										啊实打实大声道（阿萨德）
										<div class="content_data mui-overflow">
											<p class="star mui-fl">*****<span>月销3025</span></p>
											<p class="distance mui-fr">30分钟丨2.3km</p>
										</div>
										<div class="content_lists mui-overflow">
											<p class="contnet_items mui-fl"><span>起送￥20丨配送￥3丨人均￥15</span></p>
											<p class="meituan mui-fr">美团专送</p>
										</div>
										<div class="discount_lists">
											<i class="dot">v</i>
											<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
											<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
											<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
											<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
											<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/server.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: '#dataContent',
				data: {
					proLists: []
				},
				mounted: function() {
					this.init();
					this.getData();
//					this.getLocation();
				},
				methods: {
					init: function() {
						var gallery = mui('.mui-slider-scroll');
						gallery.slider({
							interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
						});
						mui.init({
							pullRefresh: {
								container: '#pullrefresh',
								down: {
									style: 'circle',
									auto: true,
									callback: pulldownRefresh
								},
								up: {
									auto: true,
									contentrefresh: '正在加载...',
									callback: pullupRefresh
								}
							}
						});
						var count = 0;
						/**
						 * 上拉刷新具体业务实现
						 */
						function pullupRefresh() {
							setTimeout(function() {
								mui('#pullrefresh').pullRefresh().endPullup((++count > 2)); //参数为true代表没有更多数据了。
							}, 1500);
						}

						function addData() {
							console.log('刷新数据具体业务')
						}
						/**
						 * 下拉刷新具体业务实现
						 */
						function pulldownRefresh() {
							// 重新拉取位置信息
							vm.getLocation();
							// 重新拉去数据列表
							vm.getData();
							setTimeout(function() {
								addData();
								mui('#pullrefresh').pullRefresh().endPulldown();
								mui.toast("刷新成功！");
							}, 1500);
						}
					},
					getLocation: function() { // 更新显示位置信息
						mui.plusReady(function() {
							plus.geolocation.getCurrentPosition(function(p) {
								console.log(p.addresses)
								mui('#location')[0].innerText = p.addresses;
							}, function(e) {
								mui.toast(e.message + ",请尝试开启GPS");
								mui('#location')[0].innerText = e.message;
							}, false);
						})
					},
					getData: function() {
						mui.ajax(server+'/shop/list', {
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							success: function(res) {
								console.log(res);
								vm.proLists = res;
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
								console.log('网络/服务器出现错误，请稍后重试！');
							}
						})
					},
					addData: function() {

					},
					GoTo: function(elem) {
						var oUrl = elem.getAttribute('id'),
							aUrl = oUrl + '.html';
						mui.openWindow({
							url: aUrl,
							id: aUrl,
							show: {
								autoShow: true,
								aniShow: 'auto'
							},
							waiting: {
								autoShow: true,
								title: '正在加载...'
							}
						})
					}
				}
			})
			$('#location').on('tap',function () {
				vm.GoTo(this)
			})
		</script>
	</body>

</html>